{% extends "base.html" %}
{% block content %}
    <div class="scui_collector">
        <div class="wizard" data-initialize="wizard">
            <div class="steps-container">
                <ul class="steps">
                    <li data-step="1" data-name="campaign" class="active">
                        <span class="badge">1</span>选择项目
                        <span class="chevron"></span>
                    </li>
                    <li data-step="2">
                        <span class="badge">2</span>选择网元
                        <span class="chevron"></span>
                    </li>
                    <li data-step="3" data-name="template">
                        <span class="badge">3</span>预处理
                        <span class="chevron"></span>
                    </li>
                    <li data-step="4" data-name="template">
                        <span class="badge">4</span>结果处理
                        <span class="chevron"></span>
                    </li>
                </ul>
            </div>
            <div class="actions">
                <button type="button" class="btn btn-default btn-prev">
                    <span class="glyphicon glyphicon-arrow-left"></span>Prev</button>
                <button type="button" class="btn btn-primary btn-next" data-last="Complete">Next
                    <span class="glyphicon glyphicon-arrow-right"></span>
                </button>
            </div>
            <div class="step-content">
                <div class="step-pane active sample-pane alert" data-step="1">
                    <h4>选择检查项目</h4>
                    <table id="grid-check-item" class="table table-condensed table-hover table-striped">
                        <thead>
                            <tr>
                                <th data-column-id="id" data-identifier="true">标识</th>
                                <th data-column-id="name">名称</th>
                                <th data-column-id="type">类型</th>
                                <th data-column-id="view" data-formatter="view">查看</th>
                            </tr>
                        </thead>
                    </table>
                    <div class="modal fade" v-el:view_modal>
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">模块详情</h4>
                                </div>
                                <div class="modal-body">
                                    <dl class="dl-horizontal">
                                        <dt>模块名称</dt>
                                        <dd>{[ item_view.name ]}</dd>
                                    </dl>
                                    <dl class="dl-horizontal">
                                        <dt>模块类型</dt>
                                        <dd>{[ item_view.type ]}</dd>
                                    </dl>
                                    <dl class="dl-horizontal">
                                        <dt>模块描述</dt>
                                        <dd><pre>{[ item_view.desc ]}</pre></dd>
                                    </dl>
                                    <dl class="dl-horizontal">
                                        <dt>触发条件</dt>
                                        <dd><pre>{[ item_view.cond ]}</pre></dd>
                                    </dl>
                                    <dl class="dl-horizontal">
                                        <dt>收集指令</dt>
                                        <dd><pre>{[ item_view.oper ]}</pre></dd>
                                    </dl>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <div class="step-pane sample-pane alert" data-step="2">
                    <h4>选择网元</h4>
                    <table id="grid-ne" class="table table-condensed table-hover table-striped">
                        <thead>
                        <tr>
                            <th data-column-id="id"  data-type="numeric" data-order="asc" data-identifier="true">序号</th>
                            <th data-column-id="name">网元名称</th>
                            <th data-column-id="type">网元类型</th>
                            <th data-column-id="address">IP地址</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="step-pane sample-pane alert" data-step="3">
                    <h4>预处理</h4>
                    <ul class="nav nav-pills" role="tablist">
                        <li role="presentation"><a href="#MME-cmd" role="tab" data-toggle="tab">MME检查命令<span class="label label-danger">重要</span></a></li>
                        <li role="presentation"><a href="#SAEGW-cmd" role="tab" data-toggle="tab">SAEGW检查命令<span class="label label-danger">重要</span></a></li>
                        <li role="presentation"><a href="#MME-item" role="tab" data-toggle="tab">MME检查项目<span class="badge">{[ mme_check_item_num ]}</span></a></li>
                        <li role="presentation"><a href="#SAEGW-item" role="tab" data-toggle="tab">SAEGW检查项目<span class="badge">{[ saegw_check_item_num ]}</span></a></li>
                        <li role="presentation"><a href="#MME-ne" role="tab" data-toggle="tab">MME检查网元<span class="badge">{[ mme_check_ne_num ]}</span></a></li>
                        <li role="presentation"><a href="#SAEGW-ne" role="tab" data-toggle="tab">SAEGW检查网元<span class="badge">{[ saegw_check_ne_num ]}</span></a></li>
                    </ul>
                    <div class="tab-content">


                        <div class="tab-pane" role="tabpanel" id="MME-cmd">
                            <div class="panel panel-primary" id="MME-cmd-panel">
                                <div class="panel-body">
                                    <div class="command-list">
                                        <textarea id="mme-cmd-{[$index]}" class="command mme-command" v-for="cmd in mme_check_cmd" track-by="$index" title="{[ cmd[1] ]}">{[ cmd[0] ]}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" role="tabpanel"  id="MME-item">
                            <div class="panel panel-primary" id="MME-item-panel">
                                <div class="panel-body">
                                    <ul>
                                        <li v-for="item in mme_check_item" track-by="$index">{[ item ]}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" role="tabpanel" id="MME-ne">
                            <div class="panel panel-primary" id="MME-ne-panel">
                                <div class="panel-body">
                                    <ul>
                                        <li v-for="item in mme_check_ne" track-by="$index">{[ item ]}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane" role="tabpanel" id="SAEGW-cmd">
                            <div class="panel panel-primary" id="SAEGW-cmd-panel">
                                <div class="panel-body">
                                    <div class="command-list">
                                        <textarea id="saegw-cmd-{[index]}" class="command saegw-command" v-for="cmd in saegw_check_cmd" track-by="$index" title="{[ cmd[1] ]}">{[ cmd[0] ]}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" role="tabpanel" id="SAEGW-item">
                            <div class="panel panel-primary" id="SAEGW-ne-panel">
                                <div class="panel-body">
                                    <ul>
                                        <li v-for="item in saegw_check_item" track-by="$index">{[ item ]}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" role="tabpanel" id="SAEGW-ne">
                            <div class="panel panel-primary" id="SAEGW-ne-panel">
                                <div class="panel-body">
                                    <ul>
                                        <li v-for="item in saegw_check_ne" track-by="$index">{[ item ]}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="step-pane sample-pane alert" data-step="4">
                    <h4>结果处理</h4>
                    <span v-show="loading">
                        <div class="spinner">
                            <div class="spinner-container container1">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container2">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                            <div class="spinner-container container3">
                                <div class="circle1"></div>
                                <div class="circle2"></div>
                                <div class="circle3"></div>
                                <div class="circle4"></div>
                            </div>
                        </div>
                    </span>
                    <div class="panel-group" role="tablist" aria-multiselectable="true" id="result_greoup" v-show="!loading">
                        <div class="panel panel-default" v-for="result in check_result">
                            <div class="panel-heading" role="tab">
                                <h4 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#result_group" href="#collapse-{[result.id]}">
                                        {[ result.name ]}
                                    </a>
                                    <span v-if="result.success" class="pull-right label label-success">正常</span>
                                    <span v-else class="pull-right label label-danger">异常</span>
                                </h4>
                            </div>
                            <div id="collapse-{[result.id]}" class="panel-collapse collapse out" role="tabpanel">
                                <div class="panel-body">
                                    <pre>{[ result.log ]}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pull-right">
                        <button id="download-mme" type="button" class="btn btn-info" @click="downloadlog('mme')" :disabled="!current_log['mme_log_zip']">
                            保存MME日志
                        </button>
                        <button id="download-saegw" type="button" class="btn btn-info" @click="downloadlog('saegw')" :disabled="!current_log['saegw_log_zip']">
                            保存SAEGW日志
                        </button>
                        <button type="button" :class="{'btn btn-primary' : mail_unsend, 'btn btn-success' : send_success, 'btn btn-danger' : send_failed}" @click="sendmail" :disabled="!mail_unsend">
                            <span v-show="mail_sending">
                                <div class="spinner">
                                    <div class="spinner-container container1">
                                        <div class="circle1"></div>
                                        <div class="circle2"></div>
                                        <div class="circle3"></div>
                                        <div class="circle4"></div>
                                    </div>
                                    <div class="spinner-container container2">
                                        <div class="circle1"></div>
                                        <div class="circle2"></div>
                                        <div class="circle3"></div>
                                        <div class="circle4"></div>
                                    </div>
                                    <div class="spinner-container container3">
                                        <div class="circle1"></div>
                                        <div class="circle2"></div>
                                        <div class="circle3"></div>
                                        <div class="circle4"></div>
                                    </div>
                                </div>
                            </span>
                            <span v-else>{[ send_text ]}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
